<template>
	<view class="container">
		<view class="group">整改照片 <text class="number">{{OldList.length+ImgList.length}}/9</text></view>
		<view class="imglist">
			<view class="img" v-for="(img,index) in OldList" @click="PrevImg(OldList, index)"><image :src="Tools.GetImg(img,1000)" mode="aspectFill"/><view class="delete" @click="DeleteImg1(index)" @click.stop="" v-if="Info.State==0"><image src="/static/error.png"/></view></view>
			<view class="img" v-for="(img,index) in ImgList" @click="PrevImg(ImgList, index)"><image :src="img" mode="aspectFill"/><view class="delete" @click="DeleteImg2(index)" @click.stop="" v-if="Info.State==0"><image src="/static/error.png"/></view></view>
			<view class="img bd" @click="ChooseImg" v-if="Info.State==0"><image src="/static/addphoto.png" /></view>
		</view>
		<view class="btn">
			<button class="publishs" @click="Submit">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ID:0,
				Info:{ID:0,EasyCauseActionID:0},
				OldList:[],
				ImgList:[]
			};
		},
		onLoad(options) {
			this.ID=options.ID;
			this.Find_EasyInfo();
		},
		methods:{
			ChooseImg() {
				uni.chooseImage({
					count: 9, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: res=> {
						var ImgList=[];
						res.tempFilePaths.forEach(item=>{
							ImgList.push(item);
						});
						this.ImgList = this.ImgList.concat(ImgList);
					}
				});
			},
			PrevImg(ImgList, Index){
				uni.previewImage({
				  current: ImgList[Index], // 当前显示图片的http链接
				  urls: ImgList // 需要预览的图片http链接列表
				});
			},
			DeleteImg1(index){
				const self = this
				this.Util.Confirm("您确定要删除吗？",item=>{
					self.OldList.splice(index,1)
				});
			},
			DeleteImg2(index){
				const self = this
				this.Util.Confirm("您确定要删除吗？",item=>{
					self.ImgList.splice(index,1)
				});
			},
			Find_EasyInfo(callback){
				var data = {};
				data.ID=this.ID;
				data.Act="Find_EasyInfo";
				data.Type=1;
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					this.Info = json.Data.Info;					
					if(this.Info.RectifyImgs.Trim()!=''){
						this.OldList=this.Info.RectifyImgs.split(',');
					}					
					if(callback){
						callback();
					}
				});
			},
			Submit(e){
				var data = {};
				data.Act="Save_RectifyImgs";
				data.ID=this.ID;
				if(this.ImgList.length==0 && this.Info.RectifyImgs==''){
					this.Util.Toast("请上传整改后照片");
					return;
				}
				this.Util.Loading("请稍候...");
				if(this.ImgList.length>0){
					var ImgList=this.Util.TranList(this.ImgList).reverse();
					this.Util.Upload(ImgList,"upload_file_o",[],list=>{
						data.RectifyImgs = this.OldList.concat(list).join(",");
						this.Save(data);
					});
				}else{
					data.RectifyImgs = this.OldList.join(",");
					this.Save(data);
				}
			},
			Save(data){
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					if(json.State){
						uni.$emit("Find_EasyInfo","");
						this.Util.Toast(json.Msg, obj=>{
							uni.navigateBack();
						});
					}else{
						this.Util.Alert(json.Msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.group{width:100%; height:80rpx; line-height: 80rpx; padding-left:30rpx; font-size:32rpx; margin-top:25rpx; color:#3d7dfd; background-color: #ffffff;
		.number{color:#000000; padding-right:30rpx; float:right;}
		.resign{color:#00c1a8; padding-right:30rpx; float:right;}
	}
	.imglist{width:100%; height:auto; padding-bottom: 20rpx; padding-left:30rpx; background-color: #ffffff; display: flex; flex-direction: row; flex-wrap: wrap;
		.img{width:150rpx; height:150rpx; position: relative; margin-left:30rpx; margin-bottom:20rpx;
			.delete{width:40rpx; height:40rpx; position:absolute; right:-15rpx; top:-15rpx;}
			image{width:100%; height: 100%; border-radius: 0rpx;}
		}
		.img:nth-child(4n-3){margin-left:0rpx;}
		
		.bd{border:1rpx solid #bfbfbf;}
	}
</style>
